<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>基础矢量图形</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: hidden;
            background: #fff;
        }
        #map{
            position: relative;
            height: 510px;
            border:1px solid #3473b7;
        }

        #toolbar {
            position: relative;
            padding-top: 5px;
            padding-bottom: 10px;
        }
    </style>
	<link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src = '../libs/SuperMap.Include.js'></script>
    <script type="text/javascript">
        var map,layer,pointVector,dataAdded=false,
                host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-world/rest/maps/World";
        function init()
        {
            map = new SuperMap.Map("map",{controls:[
                new SuperMap.Control.Zoom() ,
                new SuperMap.Control.Navigation() ,
                new SuperMap.Control.LayerSwitcher()
            ]});
            layer= new SuperMap.Layer.TiledDynamicRESTLayer("World", url, null,{maxResolution:"auto"});
            layer.events.on({"layerInitialized":addLayer});
            vector = new SuperMap.Layer.Vector("vector");
            addData();
        }

        function addLayer(){

            map.addLayers([layer,vector]);
            //显示地图范围
            map.setCenter(new SuperMap.LonLat(0, 0), 0);
        }

        function addData()
        {
            if(!dataAdded)
            {
                vector.removeAllFeatures();
                
                //扇形
                var  origion = new  SuperMap.Geometry.Point(0,30);
                var sides=30;
                var cuvre=  SuperMap.Geometry.Polygon.createRegularPolygonCurve(origion,50,sides,80,220);
                var cuvreVector= new SuperMap.Feature.Vector(cuvre);
                //
                cuvreVector.style={
                    strokeColor:"#1E90FF",
                    fillColor:new SuperMap.Style.LinearGradient(0.0,0.0,1.0,0.0,[{offset:0.0,color:"#C6E2FF",opacity:1},{offset:1.0,color:"#1E90FF",opacity:0.6}]),
                    strokeWidth:2 ,
                    fillOpacity:1
                };

                //椭圆
                var points=createEllipse(100,0,50,25);
                linearRings = new SuperMap.Geometry.LinearRing(points),
                        region = new SuperMap.Geometry.Polygon([linearRings]);
                var ellipseVector= new SuperMap.Feature.Vector(region);
                ellipseVector.style={
                    fillColor:new SuperMap.Style.RadialGradient(0.5,0.5,0.5,0.5,0.5,[{offset:0.0,color:"white",opacity:1},{offset:1.0,color:"#C1FFC1",opacity:0.6}]),
                    strokeColor:"#C1FFC1",
                    fillOpacity:0.9
                };


                //圆
                var centerPoint=new  SuperMap.Geometry.Point(-80,0);
                var circleP=createCircle(centerPoint,30,256,360,360);
                var circleVector= new SuperMap.Feature.Vector(circleP);
                //
                circleVector.style={
                    strokeColor:"#CAFF70",
                    fillColor:new SuperMap.Style.RadialGradient(0.5,0.5,0.5,0.2,0.3,[{offset:0.0,color:"white",opacity:1},{offset:1.0,color:"#CAFF70",opacity:0.6}]),
                    strokeWidth:2 ,
                    fillOpacity:0.8
                };
                vector.addFeatures([cuvreVector,ellipseVector,circleVector]);
                dataAdded=true;
            } else{
                alert("数据已加载。");
            }
        }
        //函数的参数x,y为椭圆中心；a,b分别为椭圆横半轴
        function createEllipse(x,y,a,b){
            var step = (a > b) ? 1 / a : 1 / b,points=[];
            //step是等于1除以长轴值a和b中的较大者
            //i每次循环增加1/step，表示度数的增加
            //这样可以使得每次循环所绘制的路径（弧线）接近1像素
            for (var i = 0; i < 2 * Math.PI; i += step)
            {
                //参数方程为x = a * cos(i), y = b * sin(i)，
                //参数为i，表示度数（弧度）
                var point=new SuperMap.Geometry.Point(x+a*Math.cos(i),y+b*Math.sin(i));
                points.push(point);
            }
            return points;
        }
        //圆
        function createCircle(origin, radius, sides,r,angel){
            var rR = r*Math.PI/(180*sides);
            var rotatedAngle, x, y;
            var points = [];
            for(var i=0; i<sides; ++i) {
                rotatedAngle = rR*i;
                x = origin.x + (radius * Math.cos(rotatedAngle));
                y = origin.y + (radius * Math.sin(rotatedAngle));
                points.push(new SuperMap.Geometry.Point(x, y));
            }
            rotatedAngle = r*Math.PI/180;
            x = origin.x + (radius * Math.cos(rotatedAngle));
            y = origin.y + (radius * Math.sin(rotatedAngle));
            points.push(new SuperMap.Geometry.Point(x, y));

            var ring = new SuperMap.Geometry.LinearRing(points);
            ring.rotate(parseFloat(angel),origin);
            var geo = new SuperMap.Geometry.Collection([ring]);
            geo.origin = origin;
            geo.radius = radius;
            geo.r = r;
            geo.angel = angel;
            geo.sides = sides;
            geo.polygonType = "Curve";
            return geo;
        }


        function removeData()
        {        dataAdded =false;
            vector.removeAllFeatures();
            vector.refresh();
        }
    </script>
</head>
<body onload="init()" >
<div id="toolbar">
    <input type="button" class="btn" value ="加载数据"onclick="addData()"/>
    <input type="button" class="btn" value ="移除数据"onclick="removeData()"/>
</div>
<div id="map"></div>

</body>
</html>